<template>
    <div class="header">
        <div class="header-img">
            <el-image
                class="avatar"
                :src="
                    basicInfo?.work_user?.avatar ||
                    'https://img-scrm-dev.keyid.cn/keyid-scrm-server/avatar/cust_default.png'
                "></el-image>
            <span class="title-name">{{ basicInfo?.work_user?.name }}</span>
        </div>
        <div>
            触发次数：<span class="info-num">{{ basicInfo.trigger_times }}</span>
        </div>
        <div>
            触发人数：<span class="info-num">{{ basicInfo.trigger_nums }}</span>
        </div>
        <div>
            首次触发时间：<span class="info-num">{{ basicInfo.first_trigger_time }}</span>
        </div>
    </div>
    <el-divider />
    <div class="customer_list_search" style="padding: 0">
        <div style="text-align: right; margin-bottom: 16px; margin-right: 10px">
            <el-button plain :disabled="!tableData.length" @click="exportData">导出</el-button>
        </div>
        <div v-if="tableData.length">
            <el-table :data="tableData" stripe class="table-box" header-row-class-name="table_header_title">
                <el-table-column label="客户信息">
                    <template #default="scope">
                        <div class="avatar-box">
                            <el-image
                                class="avatar"
                                :src="
                                    scope.row?.cust?.avatar ||
                                    'https://img-scrm-dev.keyid.cn/keyid-scrm-server/avatar/cust_default.png'
                                "></el-image>
                            <span class="name">{{ scope.row?.cust?.name || '--' }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="客户聊天时间" prop="chat_time"></el-table-column>
                <el-table-column label="客户消息" prop="chat_message">
                    <template #default="scope">
                        <el-popover
                            v-if="scope.row.chat_message"
                            :width="300"
                            trigger="hover"
                            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
                            <template #reference>
                                <span class="line">{{ scope.row.chat_message || '--' }}</span>
                            </template>
                            <template #default>
                                <span>{{ scope.row.chat_message || '--' }}</span>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="提醒时间" prop="remind_time"></el-table-column>
                <el-table-column label="操作" width="220px">
                    <template #default="scope">
                        <div class="btn-box">
                            <div @click="chatRecord(scope.row)">聊天记录</div>
                            <div @click="custDetail(scope.row)">客户详情</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
        <ZWPagination ref="PaginationRef" @submit="pageChangeFun" />
        <violationRecord ref="violationRef" :msgid="msgid"></violationRecord>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import ZWPagination from '@/components/ZWPagination.vue';
import { useStore } from '@/store';
import { custList, custExport } from '@/api/employe/staffsupervision/timeoutreplay';
import violationRecord from './viewContext.vue';
import { getSetionId } from '@/utils/utils';
import router from '@/router';
import { ElMessage } from 'element-plus';
const msgid = ref();
const store = useStore();
const basicInfo = ref({
    work_user_id: '',
    work_user: {
        avatar: '', //员工头像
        name: '' //员工名字
    }, //触发员工信息
    first_trigger_time: '', //首次书法时间
    trigger_times: 0, //触发次数
    trigger_nums: 0 //触发人数
});
const violationRef = ref(null);
const timeoutId = ref();
const tableData = ref([]);
const pageData = reactive({
    page: 1,
    page_size: 15
});
const isShow = ref(false);
//聊天记录
const chatRecord = (item: any) => {
    msgid.value = item.msgid;
    violationRef.value.showDrawer = true;
    violationRef.value.start = true;
    violationRef.value.getContext(item, basicInfo.value.work_user_id);
};
//客户详情
const custDetail = (val: any) => {
    if (!val.cust.id) {
        ElMessage.error('当前数据异常，请刷新页面');
        return;
    }
    router.push(`/customer/manage/list/detail?id=${val.cust.id}&type=${val.cust.type}`);
};
//导出
const exportData = () => {
    const params = {
        timeout_remind_rule_id: timeoutId.value,
        work_user_list: [basicInfo.value.work_user_id]
    };
    custExport(params).then((res: any) => {
        window.location = res;
    });
};
//获取标题
const getInfo = (val: any, id: any) => {
    basicInfo.value = val;
    timeoutId.value = id;
    getCustList();
};
//分页
const pageChangeFun = (val: any) => {
    pageData.page = val.page;
    pageData.page_size = val.page_size;
    getCustList();
};
//获取列表数据
const getCustList = () => {
    const params = {
        timeout_remind_rule_id: timeoutId.value,
        work_user_id: basicInfo.value.work_user_id,
        page: pageData.page,
        page_size: pageData.page_size
    };
    custList(params).then((res: any) => {
        tableData.value = res.data;
        store.dispatch('pageTotal', res.total);
    });
};
defineExpose({
    getInfo
});
</script>
<style lang="scss" scoped>
.header {
    margin-top: 24px;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #969696;
    line-height: 20px;

    .info-num {
        color: #33302d;
    }

    .header-img {
        display: flex;
        align-items: center;

        .title-name {
            font-size: 16px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
            vertical-align: middle;
            margin-left: 8px;
        }
    }
}

.customer_list_search {
    padding-bottom: 12px !important;
}

.table-box {
    .avatar-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .name {
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
            max-width: 90px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            margin: 0 10px;
        }
    }

    .btn-box {
        text-align: left;

        div {
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;

            // width: 80px;
            height: 32px;
            background: #fff;
            border: 1px solid #eaeaea;
            text-align: center;
            line-height: 32px;
            margin: 0 6px 5px;
            min-height: 28px;
            padding: 0 15px;
            font-size: 12px;
            border-radius: calc(var(--el-border-radius-base) - 1px);
        }
    }
}

.line {
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 2; //行数
    line-clamp: 2;
    -webkit-box-orient: vertical; //盒子中内容竖直排列
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 4px;
}
</style>
